<template>
	<!-- 优惠价格 -->
	<view class="">
		<view class="p-fff10">
			<sunui-navbar :items="tabList" lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex"
				padding="20rpx" activeColor="rgb(217, 183, 118)" :size="150" activeLineBg="#fff" textAlign="center"
				activeLineWidth="60%" activeDirection="space-between" activeLineHeight="4rpx" bgColor="#fff"
				:margin="10" @change="getChange"></sunui-navbar>
		</view>
		<!-- 优惠券 -->

		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">

			<!-- 套餐卡列表 -->
			<block v-for="(item,index) in list" :key="index">
				<view class="padding30 margin-top_20rpx">
					<view :class="[currentIndex != 0?'couponList-gay':'couponList']">
						<view class="flex-between">
							<!-- <!-- 1 抵扣券 2 新人券 3 无门槛 --> 
							<view class="couponPrice " v-if="item.type==2">
								<view class="imgBack flex">
									<text class="font-overflow padding_5rpx" style="margin-bottom: 14rpx; ">新人优惠券</text>
								</view>
								<view class="price-active">
									{{totelName(item.discount_intensity)}}元
								</view>
							</view>
							<view class="couponPrice " v-if="item.type==3">

								<view class="price flex">
									{{totelName(item.discount_intensity)}}元
								</view>
							</view>

							<view class="couponPrice " v-if="item.type==1">

								<view style="height: 100%;" class=" flex-column">
									<text class="font-overflow" style="text-align: center;"
										:style="{ color: currentIndex != 0 ?'rgb(255, 255, 255)'  :'rgb(122, 85, 32)',fontSize: '48rpx',width:'200rpx', }">{{totelName(item.discount_intensity)}}元</text>
									<text
										:style="{ color: currentIndex != 0 ?'rgb(255, 255, 255)'  :'rgb(217, 183, 118)' }">{{item.name}}</text>
								</view>

							</view>
							<view class="flex-column-between-start " style="height: 130rpx;width: 310rpx;">
								<view :style="{ color: currentIndex != 0 ?'rgb(114, 114, 114)'  :'rgb(255, 102, 0)'  }">
									<view class="font-overflow" style="font-size: 38rpx;width: 310rpx;">
										{{ item.type === 3 ? '无门槛福利优惠券' : '满' + totelName(item.trigger_amount) + '减' +totelName(item.discount_intensity)  + '元' }}
									</view>
								</view>
								<view style="color: rgb(153, 153, 153);">
									<text>到期时间：{{extractedDate(item.effective_time)}}</text>
								</view>
							</view>
							<view class="useBtn flex" @click="useCoupon()">
								{{currentIndex == 1?'已使用':currentIndex == 2?'已过期':'去使用'}}
							</view>
						</view>
						<view :class="[item.type==2?'couponBottom-active':'couponBottom']" class=" flex-start-center ">
							<text class="font-overflow">{{item.desc}}</text>
						</view>
					</view>
				</view>
			</block>





		</mescroll-body>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				currentIndex: 0,
				tabList: [{
					name: '去使用',
					id: '' //null
				}, {
					name: '已过期',
					id: '1' //null
				}, {
					name: '已使用',
					id: '2' //null
				}, ],
				list: [],
				
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: '',
				token: uni.getStorageSync('login').token,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {
			this.mescroll?.resetUpScroll();
		},
		computed: {
			totelName: function() {
				return function(nums) {
					let num
					if (nums.endsWith(".00")) {
						num = nums.slice(0, -3); // 去除末尾的 ".00"
					}
					if (nums >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						console.log(nums)
						return num?num:nums;
					}
				};
			},
			extractedDate: function() {
				return function(time) {
					console.log(time)
					return time.split(' ')[0];
				};
			}
		},
		methods: {
			// 去使用
			useCoupon(){
				this.$sun.navGo('/pages/firstPage/firstPage',{currentIndex:1})
			},
			getChange(index) {
				console.log(index)
              
				this.currentIndex = index
				this.mescroll?.resetUpScroll();

			},
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.myCoupon,
					data: {
						page: scroll.num,
						limit: 10,
						status:this.currentIndex+1
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
				
				})
				
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},

		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #fff;
	}

	.couponList {

		height: 186rpx;
		padding-right: 10rpx;
		background: rgb(249, 249, 249);
		;

		.couponPrice {
			width: 200rpx;
			height: 186rpx;
			background: linear-gradient(122.64deg, rgb(244, 211, 150) 10.502%, rgb(254, 230, 182) 85.981%);
			position: relative;

			.imgBack {
				position: absolute;
				left: -8rpx;
				top: 10rpx;
				width: 139.66rpx;
				height: 64rpx;
				color: rgb(255, 255, 255);

				background-repeat: no-repeat;
				background-size: contain;
				background-image: url('../../static/会员卡yi/微信图片_20240312095044.png');
			}

			.price {
				// padding: 109rpx 0 0 10rpx;
				color: rgb(255, 97, 69);
				font-size: 46rpx;
				height: 100%;
			}

			.price-active {
				padding: 95rpx 0 0 10rpx;
				color: rgb(255, 97, 69);
				font-size: 46rpx;
			}
		}

		.useBtn {
			border-radius: 40rpx;

			background: rgb(246, 214, 155);
			width: 126.88rpx;
			height: 56rpx;
			font-size: 24rpx;
			color: rgb(51, 51, 51);
		}

		.couponBottom {

			height: 64rpx;
			width: calc(100% + 10rpx);
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url('../../static/会员卡yi/微信图片_20240311172951.png');
			margin-top: -15rpx;
			position: relative;
			color: rgb(217, 183, 118);
			padding-left: 20rpx;

			font-size: 24rpx;
		}

		.couponBottom-active {
			width: calc(100% + 10rpx);
			height: 64rpx;
			background-repeat: no-repeat;
			background-size: cover;

			background-image: url('../../static/会员卡yi/Group 130.png');
			margin-top: -15rpx;
			position: relative;
			color: rgb(217, 183, 118);
			padding-left: 20rpx;
		
			font-size: 24rpx;
		}
	}

	.couponList-gay {

		height: 186rpx;
		padding-right: 10rpx;
		background: rgb(249, 249, 249);
		;

		.couponPrice {
			width: 200rpx;
			height: 186rpx;
			background: rgb(169, 169, 169);
			position: relative;

			.imgBack {
				position: absolute;
				left: -8rpx;
				top: 10rpx;
				width: 139.66rpx;
				height: 64rpx;
				color: rgb(255, 255, 255);

				background-repeat: no-repeat;
				background-size: contain;
				background-image: url('../../static/会员卡yi/微信图片_20240312110550.png');
			}

			.price {
				// padding: 109rpx 0 0 10rpx;
				color: #fff;
				font-size: 46rpx;
				height: 100%;
			}

			.price-active {
				padding: 95rpx 0 0 10rpx;
				color: #fff;
				font-size: 46rpx;
			}
		}

		.useBtn {
			border-radius: 40rpx;

			background: rgb(169, 169, 169);
			width: 126.88rpx;
			height: 56rpx;
			font-size: 24rpx;
			color: rgb(255, 255, 255);
		}

		.couponBottom {
			width: calc(100% + 10rpx);
			height: 64rpx;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url('../../static/会员卡yi/微信图片_20240311172951.png');
			margin-top: -15rpx;
			position: relative;
			color: rgb(169, 169, 169);
			padding-left: 20rpx;

			font-size: 24rpx;
		}

		.couponBottom-active {
			width: calc(100% + 10rpx);
			height: 64rpx;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url('../../static/会员卡yi/微信图片_20240311172951.png');
			margin-top: -15rpx;
			position: relative;
			color: rgb(169, 169, 169);
			padding-left: 20rpx;
			
			font-size: 24rpx;
		}
	}
</style>